<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>MY_PRO</title>
		<link rel="stylesheet" type="text/css" th:href="@{static/admin/layui/css/layui.css}"/>
		<link rel="stylesheet" type="text/css" th:href="@{static/admin/css/admin.css}"/>
		<link rel="stylesheet" th:href="@{static/admin/ztree/css/ztree-bootstrap.css}">
		<!--<link rel="stylesheet" href="../../../../static/admin/lib/bootstrap/bootstrap.min.css">-->
		<link rel="stylesheet" th:href="@{static/admin/fonts/fontawesome/css/all.css}">
		<link rel="stylesheet" th:href="@{static/admin/lib/fontawesome-iconpicker/css/fontawesome-iconpicker.css}">


	</head>
	<body>


	<form class="layui-form column-content-detail">
						<div class="layui-content">
							<div class="layui-tab-item layui-show">
								<div class="layui-form-item">
									<label class="layui-form-label">菜单类型：</label>
									<div class="layui-input-block">
										<select name="type" lay-verify="required"  lay-filter="value" th:value="${permission?.type}" id="type">
											<option value="">请选择菜单类型</option>
											<option value="0">目录</option>
											<option value="1">菜单</option>
											<option value="2">按钮</option>
										</select>
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">名称：</label>
									<div class="layui-input-block">
										<input type="hidden" name="id"  class="layui-input" th:value="${permission?.id}" >
										<input type="text" name="title"  class="layui-input" th:value="${permission?.title}" >
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">上级资源：</label>
									<div class="layui-input-block">
										<input type="text" name="url"   lay-verify="required" class="layui-input" th:value="${parentName}" onclick="showMenu(2)" readonly="readonly" id="detailParentMenu">
										<input type="hidden"   id="detailParentId" name="parentId" th:value="${permission?.parentId}" >
									</div>
								</div>

								<div class="layui-form-item url">
									<label class="layui-form-label">菜单URL：</label>
									<div class="layui-input-block">
										<input type="text" name="url"  class="layui-input" th:value="${permission?.url}" >
									</div>
								</div>

								<div class="layui-form-item perms">
									<label class="layui-form-label">权限标识：</label>
									<div class="layui-input-block">
										<input type="text" name="perms"  class="layui-input " th:value="${permission?.perms}" >
									</div>
								</div>

								<div class="layui-form-item icon">
									<label class="layui-form-label">图标：</label>
									<div class="layui-input-block">
										<input type="text" name="icon"  class="layui-input icon" th:value="${permission?.icon}" >
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">描述：</label>
									<div class="layui-input-block">
										<input type="text" name="description" class="layui-input" th:value="${permission?.description}">
									</div>
								</div>
								<div class="layui-form-item sort" >
									<label class="layui-form-label">排序：</label>
									<div class="layui-input-block">
										<input type="text" name="orderNum"  class="layui-input" lay-verify="required|number" th:value="${permission?.orderNum}">
									</div>
								</div>
							</div>
						</div>
					<div class="layui-form-item" style="padding-left: 10px;">
						<div class="layui-input-block">
							<button class="layui-btn layui-btn-normal" lay-submit lay-filter="submit">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>

	<div id="permissionLayer" style="display: none;padding: 20px;">
		<ul id="permissionTree" class="ztree"></ul>
	</div>

	<script th:src="@{static/admin/lib/jquery/jquery.min.js}"></script>
	<script th:src="@{static/admin/layui/layui.js}" ></script>
	<script th:src="@{static/admin/ztree/js/jquery.ztree.core.js}"></script>
	<script th:src="@{static/admin/js/core.js}"></script>
	<script th:src="@{static/admin/lib/bootstrap/bootstrap.min.js}"></script>
	<script th:src="@{static/admin/lib/fontawesome-iconpicker/js/fontawesome-iconpicker.js}"></script>

	<script>
		layui.use(['form', 'layedit', 'laydate'], function() {
			var form = layui.form,
					layer = layui.layer;
			//监听提交
			form.on('submit(submit)', function(data) {
				$.ajax({
					type: "POST",
					url: ("/saveOrUpdate").replace('//', '/'),
					data:data.field,
					dataType: "json",
					success: function (data) {
						if (data.status == 200) {
							layer.msg(data.msg, {
								offset: '30%',
								time: 800
							}, function () {
								//调用父页面的刷新
								window.parent.refresh();
							});
						}else{
							layer.msg(data.msg, {
								icon: 2,
								offset: '30%',
								time: 2000
							});
						}
					}
				});
				return false;
			});

			form.on('select(value)',function (data) {
				// 得到选中的值
				var flag=data.value;
				showHidenInput(flag)
			});

		});

		// 图标选择器
		$(function () {
			var params= 1;
			params= [[${permission?.type}]]
			$("#type").val(1)
			renderForm()//重新渲染表单函数
			showHidenInput(params)
			$('.icon').iconpicker({animation: false});
		})
		//重新渲染表单函数
		function renderForm() {
			layui.use('form', function() {
				var form = layui.form; //高版本建议把括号去掉，有的低版本，需要加()
				form.render();
			});
		}
		function showHidenInput(flag){
			if(flag=='1'){//菜单
				$(".layui-form-item").show();
			}else if(flag=='0'){//目录
				$(".perms").hide();
				$(".url").hide();
				$(".icon").show();
				$(".sort").show();
			}else if(flag=='2'){//按钮
				$(".url").hide();
				$(".icon").hide();
				$(".sort").hide();
				$(".perms").show();
			}
		}
		function showMenu(flag) {
			var ztree;
			//树-初始化设置
			var treeSetting = {
				data: {
					simpleData: {
						enable: true,
						idKey: "id",
						pIdKey: "parentId"
					}
				}
			};
			Core.postAjax('/getMenuListData', {flag: "2"}, function (data) {
				var topMenu = {
					name: "顶层菜单",
					id: 0,
					parentId: "",
					type: 0
				}
				data.unshift(topMenu);
				$.each(data, function (i, item) {
					item.open = true;
				})
				ztree = $.fn.zTree.init($("#permissionTree"), treeSetting, data);
				layer.open({
					type: 1,
					offset: '50px',
					skin: 'layui-layer-molv',
					title: "选择菜单",
					area: ['300px', '450px'],
					/* shade: 0,
                     shadeClose: false,*/
					content: jQuery("#permissionLayer"),
					btn: ['确定', '取消'],
					btn1: function (index) {
						var node = ztree.getSelectedNodes();
						if (node.length == 0) {
							layer.msg("请选择一个菜单！", function () {
							});
							return;
						}
						if (flag == 1) {
							menuCheckedType = node[0].type;
							//选择上级菜单
							$("#parentId").val(node[0].id);
							$("#parentMenu").val(node[0].name);
						} else if (flag == 2) {
							detailMenuCheckedType = node[0].type;
							//选择上级菜单
							$("#detailParentId").val(node[0].id);
							$("#detailParentMenu").val(node[0].name);
						}
						layer.close(index);
					}
				});
			});
		}
	</script>
	</body>
</html>